<template>
  <div class="wh100 app-body">
    <el-container class="wh100">
      <el-header>
        <Header />
      </el-header>
      <el-container>
        <el-aside>
          <Sidebar />
        </el-aside>
        <el-container>
          <el-main>
            <div class="wh100 main-content">
              <router-view />
            </div>

          </el-main>
          <el-footer>
            <Footer />
          </el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import Header from './components/Header.vue'
import Sidebar from './components/Sidebar.vue'
import Footer from './components/Footer.vue'
</script>

<style lang="less" scoped>
.app-body {
    background-color: #f1f1f1;
  .el-header {
    padding: 0;
    height: 8%;
    background-color: #ffffff;
    box-shadow: rgba(0, 0, 0, 0.12) 3px 3px 11px 1px;
  }
  .el-aside {
    margin-top: 1px;
    width: 12%;
    background-color: #ffffff;
  }
  .el-main{
    padding: 10px;
    .main-content{
      background-color: #ffffff;
      box-shadow: 0px 0px 12px rgba(0, 0, 0, .12);
      border-radius: 4px;
    }
  }
  .el-footer {
    padding: 0;
    height: 4%;
    background-color: #c2c2c2;
  }
}
</style>
